<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户信息</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/javascript.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/httpVueLoader.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="userInfoApp">
	<top-manage></top-manage>

	<div id="middle">
		<div id="position">
			您现在的位置是&nbsp;&gt;&nbsp;<a href="index-manage.html">管理后台</a>&nbsp;&gt;&nbsp;用户管理
		</div>
		<user-manage></user-manage>
		<div id="info">
			<h1>用户资料详情</h1>
			<table>
				<tr>
					<td align="right" style="width:90px;">用户名：</td>
					<td style="width:270px;" v-text="user.username"></td>
					<td rowspan="3">
						<img :src="user.picture" style="width:100%;" alt="头像不见了"/>
					</td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td v-text="user.password"></td>
				</tr>
				<tr>
					<td align="right">姓名：</td>
					<td v-text="user.name"></td>
				</tr>
				<tr>
					<td align="right">性别：</td>
					<td v-text="user.genderStr"></td>
					<td></td>
				</tr>
				<tr>
					<td align="right">出生日期：</td>
					<td v-text="user.birthday"></td>
					<td></td>
				</tr>
				<tr>
					<td align="right">电话号码：</td>
					<td v-text="user.phone"></td>
					<td></td>
				</tr>
				<tr>
					<td align="right">收货地址1：</td>
					<td colspan="2" v-text="user.address1"></td>
				</tr>
				<tr>
					<td align="right">收货地址2：</td>
					<td colspan="2" v-text="user.address2"></td>
				</tr>
				<tr>
					<td align="right">收货地址3：</td>
					<td colspan="2" v-text="user.address3"></td>
				</tr>
				<tr>
					<td align="right">用户权限：</td>
					<td  colspan="2" v-text="user.powerStr"></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<a href="#" @click="goUpdate(user.id)"><input type="submit" value="修改用户信息" class="button"/></a>
						<a href="../UserServlet?action=deluser&pageNum=1"><input type="submit" value="删除用户"  class="button"/></a>
					</td>
					<td></td>
				</tr>
			</table>
		</div>
	</div>

	<bottom></bottom>
</div>

<script type="text/javascript">
	Vue.use(httpVueLoader);
	const app = new Vue({
		el: "#userInfoApp",
		data: {
			user: {},
		},
		created() {
			this.user.id = window.location.search.slice(1);
			this.loadData();
		},
		methods: {
			loadData() {
				axios.get("/user/" + this.user.id).then(resp => {
					this.user = resp.data;
				});
			},
			goUpdate(id) {
				location.href="./user-update.html?"+id;
			}
		},
		components: {
			'top-manage': 'url:../common/top-manage.vue',
			'bottom': 'url:../common/bottom.vue',
			'user-manage': 'url:../common/user-manage.vue',
		},
	});
</script>
</body>
</html>